@media screen and (max-width: 769px) {
    img {
        width: 100%;
        height: 100%;
    }

    .index-container {
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
    }

    .el-carousel {
        height: 100%;
    }

    .el-carousel__item.is-animating {
        transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
    }

    ::v-deep .el-carousel__indicator.is-active button {
        opacity: 1;
        background-color: rgb(177, 153, 84);
    }

    ::v-deep .el-carousel__indicator--vertical .el-carousel__button {
        width: 3px;
        height: 35px;
    }

    ::v-deep .el-carousel__button {
        opacity: 1;
    }

    ::v-deep .el-carousel__indicator--vertical {
        padding: 6px 22px;
    }

    ::v-deep .el-carousel__indicators--vertical {
        top: 60%;
    }

    ::v-deep .el-carousel__indicators--horizontal {
        bottom: 20px;
    }

    .index-body {
        width: 100%;
        height: 100%;
    }

    .index-img {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .index-content {
        position: relative;
        z-index: 888;
        width: 100%;
        height: 100%;
    }

    .center-container {
        color: #fff;
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    @keyframes showMove {
        0% {
            transform: translate(-140%, 0%);
        }

        100% {
            transform: translate(0%, 0%);
        }
    }

    @keyframes hideMove {
        0% {
            transform: translate(0%, 0%);
        }

        100% {
            transform: translate(140%, 0%);
        }
    }

    .center-text {
        position: absolute;
        top: 18%;
        right: 5%;
        animation-name: hideMove;
        animation-duration: 1s;
        animation-timing-function: ease;
        font-family: "Times New Roman", Times, serif;
        font-style: italic;
        font-weight: 100;
    }

    .center-text.active {
        animation-name: showMove;
        animation-duration: 2s;
        animation-timing-function: ease;
        /* transform:translate(0%,0%); */
    }

    .index-info.active {
        animation-name: showMove;
        animation-duration: 2s;
        animation-timing-function: ease;
        /* transform:translate(0%,0%); */
    }

    .index-title {
        font-size: 8vw;
        font-weight: normal;
    }

    .index-subtitle {
        font-size: 8vw;
        letter-spacing: 0;
    }

    /* .index-subtitle:hover {
        color: rgb(177, 153, 84);
      } */
    .cnav.tr {
        top: 1vh;
        left: 5vw;
    }

    .br {
        bottom: 10px !important;
        right: 0px !important;
        width: 25vw;
        height: 12vh;

        >img {
            width: 25vw;
            height: 12vh;
        }
    }

    .index-info {
        position: absolute;
        right: 5%;
        bottom: 20%;
        /* width: 305px; */
        text-align: right;
        font-style: italic;
        font-size: 3vw;
    }

    .login-text {
        display: flex;
        align-items: center;
        font-size: 3vw;
        cursor: pointer;
        width: max-content;

        img {
            margin-left: 0.4vw;
        }

        /* flex-direction: column; */
    }

    .uvnav {
        z-index: 999;
        position: fixed;
        cursor: pointer;
        color: #fff;
        font: 18px/18px "BlairITC TT", Arial, Helvetica;
        text-align: center;
        letter-spacing: 0.1em;
        text-align: center;

        .direction {
            transform: rotate(-90deg);
            font-size: 8vw;
        }

        .text-uvnav {
            border: 1px solid #fff;
            border-radius: 25px;
            transform: rotate(-180deg);
            padding: .3vh 0;
        }

    }

    .bgb {
        background-color: rgba(255, 255, 255, .5);
        border: none !important;
    }

    .uvnav.down {
        width: 30vw;
        height: 4vh;
        left: 75vw;
        top: 50vh;
        z-index: 777;
        background-image: none !important;

    }

    .uvnav.up {
        width: 30vw;
        height: 4vh;
        right: 74vw;
        top: 50vh;
        z-index: 777;
        background-image: none !important;
        display: flex;
        flex-direction: column;
        justify-content: end;
    }

    .uvnav.up:hover {
        background-image: none !important;
    }

    .uvnav.down:hover {
        background-image: none !important;
    }

    .bl {
        font-size: 8vw !important;
        bottom: 6px !important;
        left: 18px !important;
    }
}